<template>
  <div id="z-tree" class="flex-col">
    <div class="wrap flex-1">
        <h2>大数据量树</h2>
      <div class="c" style="height: 600px; overflow: auto;">
        <vue-magic-tree ref="bigtreeRef"
          :nodes="nodes"
          :setting="setting"
          @onClick="onClick"
          @onCheck="onCheck"
          @onCreated="handleCreated"
        />
      </div>
    </div>
    <el-button @click="getNodeByParam">勾选某个节点</el-button>
  </div>
</template>

<script>
import axios from 'axios';
const bigData = require("./big-tree-data.json");
import VueMagicTree from 'vue-magic-tree'

function getAsyncUrl(treeId, treeNode) {
    let nodeId = '358198412409044992';
    let nodeType = '5';
    if (treeNode) {
        nodeId = treeNode.nodeId
        nodeType = treeNode.nodeType
    }
    return `http://172.31.119.38:35002/roc/customerweb/web/basedata/getHouseTreeChild?nodeId=${nodeId}&nodeType=${nodeType}`
}

export default {
  name: "app",
  components: {
    VueMagicTree, // 引入组件包
  },
  data() {
    let _this = this;
    return {
      nodes: [],
      showIndex: 0,
      ztreeObj: null,
      setting: {
        check: {
          enable: true,
        },
        // async: {
        //   enable: true,
        //   url: getAsyncUrl,
        //   autoParam:["name", "id=nodeId", "nodeType"],
        //   // otherParam:{"otherParam":"zTreeAsyncTest"},
        //   headers: {
        //     'X-Access-Source': 'roc',
        //     'X-Access-Token': '3e391f7301053d11966be88c1b488535'
        //   },
        //   // dataFilter: filter,
        //   type: 'GET'
        // },
        data: {
          // 设置图标库(采用iconfont class形式)
          iconMap: {
            0: 'iconfilter-fill',
            1: 'iconhome',
            2: 'iconstar'
          },
          // 设置对应每个节点的节点类型，与数据中customType对应(25行)
          key: {
            nodeType: 'customType',
            name: 'nodeName',
            // title: 'nodeName',
            children: 'childList',
            isParent: 'hasChild'
          }
        },
        callback: {
          onExpand: function(event, treeId, treeNode, msg) {
            if (treeNode && treeNode.childList.length) { // 说明这个节点的数据加载过
              return;
            }
            let nodeId = '';
            let nodeType = '';
            if (treeNode) {
                nodeId = treeNode.nodeId
                nodeType = treeNode.nodeType
            }
            let url= `http://172.31.119.38:35002/roc/customerweb/web/basedata/getHouseTreeChild?nodeId=${nodeId}&nodeType=${nodeType}`
            axios.get(url, {
              headers: {
                'X-Access-Source': 'roc',
                'X-Access-Token': '3e391f7301053d11966be88c1b488535'
              }
            }).then(res => {
              if (res.data.code === '0') {
                let data = res.data.data;
                // if(treeNode == undefined){                  
                //   _this.$refs.bigtreeRef.ztreeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据
                // }
                // 如果当前节点是checked状态，则展开它的子节点也应该是checked状态
                data.forEach(item => {
                  if (!item.hasChild) { // 如果这个节点没有子级
                    delete item['childList'];
                  }
                })
                if (treeNode.checked) {
                  data.map(item => item.checked = true);
                }
                _this.$refs.bigtreeRef.ztreeObj.addNodes(treeNode,data,true);//如果是加载子节点，那么就是父节点下面加载
                _this.$refs.bigtreeRef.ztreeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
              }
            })
          }
        }
      }
    };
  },
  mounted() {
    setTimeout(() => {this.firstData()}, 20);
  },
  methods: {
    firstData() {
      let nodeId = '358198412409044992';
      let nodeType = '5';
      let url= `http://172.31.119.38:35002/roc/customerweb/web/basedata/getHouseTreeChild?nodeId=${nodeId}&nodeType=${nodeType}`
      axios.get(url, {
        headers: {
          'X-Access-Source': 'roc',
          'X-Access-Token': '3e391f7301053d11966be88c1b488535'
        }
      }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data;
          data.childList && data.childList.forEach(item => {
            if (!item.hasChild) { // 如果这个节点没有子级
              delete item['childList'];
            }
          })           
          this.$refs.bigtreeRef.ztreeObj.addNodes(null,[{...data}],true);// 如果是根节点，那么就在null后面加载数据
          let node0 = this.$refs.bigtreeRef.ztreeObj.getNodes()[0]
          this.$refs.bigtreeRef.ztreeObj.expandNode(node0, true)
          //_this.$refs.bigtreeRef.ztreeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
        }
      })
    },
    clickRemove(treeNode) {
      console.log('remove', treeNode)
      this.ztreeObj && this.ztreeObj.removeNode(treeNode)
    },
    onClick: function(evt, treeId, treeNode) {
      // 点击事件
      console.log(evt.type, treeNode);
    },
    onCheck: function(evt, treeId, treeNode) {
      // 选中事件
      console.log(evt.type, treeNode);
    },
    handleCreated: function(ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },
    getNodeByParam() { // 获取某个节点
      let node = this.ztreeObj.getNodeByParam("nodeId", '358708932484530176', null);
      if (node) {
        this.ztreeObj.checkNode(node, true, true);
      }
    }
  }
};
</script>

<style>
#z-tree {
  height: 100%;
}
.toolbar {
  margin: 20px auto;
}
.toolbar .btn {
  padding: 0.5em 1em;
  outline: none;
  border-radius: 4px;
}
</style>